<!-- src/views/outbound/picked/index.vue -->
<script setup>
import { onMounted, ref } from 'vue'
import { getAllByStatusApi } from '@/api/outbound/outboundorderdetails'
import display from './display.vue' 
import { ElMessage } from 'element-plus'

const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const form = ref({
  invoiceCode: '',
  customerId: '',
  skuId: '' 
})

// display组件引用
const displayRef = ref(null)

// 选中的明细列表
const selectedDetailsList = ref([])

const mockCustomerList = [
  { id: 1001, name: '客户A' },
  { id: 1002, name: '客户B' },
  { id: 1003, name: '客户C' },
  { id: 1004, name: '客户D' }
]

// 复用 pendingpick 中的客户名获取方法
const getCustomerName = (customerId) => {
  const customer = mockCustomerList.find(item => item.id === customerId)
  return customer ? customer.name : '未知客户'
}

// 获取数据
const getAll = async () => {
  const res = await getAllByStatusApi(
    form.value.invoiceCode,
    form.value.customerId,
    form.value.skuId,
    currentPage.value,
    pageSize.value
  )
  total.value = res.total
  tableData.value = res.rows
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  getAll()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getAll()
}

const search = () => {
  currentPage.value = 1
  getAll()
}

// 查看详情
const handleViewDetails = async (row) => {
  try {
    // 这里应该调用API获取详细信息
    // 由于getAllByStatusApi可能已经返回了详细信息，我们直接使用
    selectedDetailsList.value = [row] // 如果有多个明细项，应该从API获取
    
    displayRef.value.open()
  } catch (error) {
    console.error('获取明细失败:', error)
    ElMessage.error('获取明细失败!')
  }
}

// 添加缺失的方法
const handleAdd = () => {
  // TODO: 实现新增功能
}
const ids = ref([])
const handleSelectionChange = (val) => {
  ids.value = val.map(item => item.id)
}
const delById = (id) => {
  // TODO: 实现删除功能
}

onMounted(() => {
  getAll()
})
</script>

<template>
  <!-- 添加display组件 -->
  <display ref="displayRef" :items="selectedDetailsList" />
  
  <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
    <!-- <el-button @click="handleAdd" type="primary">新增</el-button> -->
  </div>

  <el-form :model="form" :inline="true" style="margin-bottom: 20px;">
    <el-form-item label="发货单号">
      <el-input v-model="form.invoiceCode" placeholder="请输入发货单号" />
    </el-form-item>
    <el-form-item label="客户名称">
      <el-input v-model="form.customerId" placeholder="请输入客户姓名" />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="form.skuId" placeholder="请输入商品ID" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="invoiceCode" label="发货单号" />
    <!-- 根据 pendingpick 的字段结构调整 -->
    <el-table-column prop="customerId" label="客户姓名">
      <template #default="{ row }">
        {{ getCustomerName(row.customerId) }}
      </template>
    </el-table-column>
    <el-table-column prop="code" label="商品编码" />
    <el-table-column prop="title" label="商品名称" />
    <el-table-column prop="description" label="商品描述" />
    <el-table-column prop="barcode" label="条码" />
    <el-table-column prop="outCount" label="订单数量" />
    <el-table-column prop="pendingPickQuantity" label="待拣货数量" />
    <el-table-column prop="pickedQuantity" label="已拣货数量" />
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{ row }">
        <el-button size="small" @click="handleViewDetails(row)">查看</el-button>
        <el-button size="small" type="danger" @click="delById(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>